<template>
	<view class="template-create tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :bottomShadow="false">活动详情</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom  fixedtop" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="tn-margin">

				<view class="debox">
					<!-- img -->
					<view class=" tn-text-center">
						<image :src="body.images" @click="datu(body.images,0)"
							style="height: 450rpx;border-radius: 10px;" mode="heightFix"></image>

					</view>

					<view class="dedebox tn-padding">
						<!-- detail -->
						<view class="headtxt tn-margin-top tn-text-bold tn-text-xl">{{body.title}}</view>

						<view class="labelbox tn-margin-top tn-flex tn-flex-col-center tn-flex-row-between">
							<view class="labelitem" v-if="body.nan_price>0">男生{{body.nan_price}}元</view>
							<view class="labelitem" v-else>男生免费</view>
							<view class="labelitem" style="background: #ff99d7;" v-if="body.nv_price>0">
								女生{{body.nv_price}}元</view>
							<view class="labelitem " style="background: #ff99d7;" v-else>女生免费</view>
							<!-- 	<view class="labelitem">男女不限</view> -->
						</view>

						<view class="activitynum tn-margin-top">男生人数：{{body.nan_num}} 已报名：{{body.join_num}}</view>
						<view class="activitynum tn-margin-top">女生人数：{{body.nv_num}} 已报名：{{body.join_nv_num}}</view>
						<view class="timebox tn-margin-top tn-flex tn-flex-col-center tn-flex-row-between">
							<view
								class="timeitem tn-flex tn-flex-col-center tn-flex-row-center tn-flex-direction-column">
								<view class="time tn-text-bold">{{body.times}}</view>
								<view class="txt tn-color-gray">活动举办时间</view>
							</view>

							<view class="line"></view>
							<view
								class="timeitem tn-flex tn-flex-col-center tn-flex-row-center tn-flex-direction-column">
								<view class="time tn-text-bold">{{body.times_end}}</view>
								<view class="txt tn-color-gray">报名截止时间</view>
							</view>

						</view>
					</view>


				</view>



				<!-- location -->
				<view class="debox tn-padding tn-margin-top" @click="openLocation">
					<view class="loction tn-flex tn-flex-col-center tn-flex-row-between">
						<view class="name">{{body.address}}</view>
						<view class="btn tn-flex tn-flex-col-center" style="width: 150rpx;">
							<view class="icon tn-icon-location"></view>
							<view class="txt">导航</view>
						</view>
					</view>
				</view>


				<view class="debox tn-padding tn-margin-top">
					<view class="avatarbox">
						<view class="name">当前报名（男{{body.join_num}}/女{{body.join_nv_num}}）</view>

						<view class="swiper-item tn-margin-sm">
							<view class="avatarlist tn-flex tn-flex-col-center tn-flex-row-between">
								<block v-for="(item,index) in body.joinInfo" :key="index">
									<view
										class="info tn-flex tn-flex-col-center tn-flex-row-center tn-flex-direction-column">
										<view class="avatar">
											<image class="img100" :src="item.avatar" mode="aspectFill"></image>
											<view class="sex tn-icon-sex-male" v-if="item.sex==1"></view>
											<view class="sex tn-icon-sex-female" v-else></view>
										</view>
										<view class="txt tn-text-ellipsis tn-text-center">{{item.nickname}}</view>
									</view>

								</block>
							</view>
						</view>


						</swiper>


					</view>

				</view>


				<view class="debox tn-padding tn-margin-top">
					<view class="detail">
						<view class="name tn-text-xl">活动详情</view>
						<view class="txt tn-text-sm tn-color-gray tn-margin-top tn-text-left">

							<mp-html :content="body.detail" />
						</view>


					</view>
				</view>

				<view class="full" style="height: 20px;"></view>

			</view>
		</view>
		<view class="fixedbox tn-flex tn-flex-col-center tn-flex-row-between">

			<button class="button" open-type="chooseAvatar" @chooseavatar="chooseAvatarEvent">
				<view class="fixitem tn-flex tn-flex-col-center tn-flex-row-center tn-flex-direction-column">
					<view class="tn-icon-share tn-text-bold tn-text-xxl"></view>
					<view class="txt">分享</view>
				</view>
			</button>
			<block v-if="body.daoijishi>0">
				<block>
					<view class="fixbtn " @click="onButtonClick(0)" v-if="body.isbaoming==0">立即报名</view>
					<view class="fixbtn " style="background: #b0b0b0;" v-if="body.isbaoming==1">已报名</view>

				</block>

			</block>
			<block v-if="body.daoijishi<0">
				<view class="fixbtn " style="background: #b0b0b0;">已结束</view>

			</block>

		</view>


		<view class="tn-padding-xl tn-margin"></view>

		<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn>
		<tn-modal width="80%" mode="bottom" v-model="show_shenqing" backgroundColor="#E4E9EC" padding="30rpx 20rpx"
			:radius="25" title="举报" :showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="true">


			<view class="custom-modal-content tn-padding">
				请选择支付方式
			</view>
			<view class="tn-flex">
				<view class="tn-flex-1">
					<!-- #ifdef H5-->
					<view  v-if="configInfo.shanghu_wxchat" class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;" @click="post('wxpay')">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-wechat-fill tn-color-green" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">微信支付

							</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-->
					<view  v-if="configInfo.shanghu_xcx" class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;" @click="post('wxpay')">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-wechat-fill tn-color-green" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">微信支付
					
							</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<view class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;" @click="post('wxpay')"
						v-if="configInfo.pay_yingyong_wx">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-wechat-fill tn-color-green" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">微信支付

							</view>
						</view>
					</view>

					<view class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;margin-top: 10px;"
						@click="post('alipay')" v-if="configInfo.pay_yingyong_ali">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-alipay tn-color-blue" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">支付宝支付

							</view>
						</view>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</tn-modal>
		<tn-modal width="80%" v-model="hexiao" backgroundColor="#ffffff" padding="30rpx 20rpx" :radius="25" title="设置"
			:showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="true">

			<view>
				<view class="tn-padding" v-if="body.status!==3">
					<image :src="body.erweima" mode="widthFix" style="width:100%;"></image>
				</view>

				<view class="custom-modal-content ">
					<view class="tn-text-center ">
						<tn-button :fontSize="28" padding="20rpx" height="56rpx" backgroundColor="#686868"
							fontColor="tn-color-white" @click="tuikuanreg()" v-if="body.status==0&&body.price>0">申请退款
						</tn-button>

						<view class="tn-padding" v-if="body.status==2">
							已申请退款，等待发起人确认
						</view>

						<view class="tn-padding" v-if="body.status==3">
							已同意退款，已原路返回
						</view>
						<view class="tn-padding" v-if="body.status==4">
							发起人不同意退款
						</view>
						<tn-button :fontSize="28" padding="20rpx" height="56rpx" backgroundColor="#00aaff"
							fontColor="tn-color-white" style="margin-left: 15px;" @click="call(userbody.mobile)">
							联系发起人
						</tn-button>
					</view>
				</view>
			</view>

		</tn-modal>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
	import {
		render
	} from "vue"
	export default {
		name: 'TemplateProduct',
		mixins: [template_page_mixin],
		components: {
			NavIndexButton
		},
		data() {
			return {
				oid: 0,
				hexiao: false,
				show_shenqing: false,
				custom: false,
				userbody: [],
				body: [],
				loginBoxFlag: false,
				cardCur: 0,
				swiperList: [],
				current: 0,
				fixedList: [],
				join: [],
				content: [],
				countOptions: [{
					icon: 'share-circle',
					text: '分享',
				}],

				customButtonGroupfaqi: [{
					text: '报名管理',
					backgroundColor: 'tn-cool-bg-color-16',
					color: '#FFFFFF'
				}],




				customButtonGroups: [{
					text: '我要报名',
					backgroundColor: '#000',
					color: '#FFFFFF'
				}],
				customButtonGroupsd: [{
					text: '已报名成功',
					backgroundColor: 'tn-cool-bg-color-16',
					color: '#FFFFFF'
				}],
				tagList: [],

			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
			}

			let that = this
			this.info()
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});
			uni.$on('zujufabu', data => {
				that.mescroll.resetUpScroll()
			});


		},
		methods: {
			refreshFn(){
				
			},
			closeGlobalLoginFn(){
				
			},
			chooseAvatarEvent(){
				
			},
			
			openLocation() {

				if (this.body.lng) {
					uni.openLocation({
						longitude: Number(this.body.lng),
						latitude: Number(this.body.lat),
						name: '活动举办地',
						address: this.body.address
					})
				} else {
					this.msg('未标注地图')
				}

			},

			datu(url, index) {

				uni.previewImage({
					current: index,
					urls: url,
					index
				})

			},
			closeGlobalLoginFn() {
				this.loginBoxFlag = false;
			},
			onButtonClick(e) {

				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}



				if (e == 0) {
					if (this.body.isbaoming) {
						this.msg('你已经报名')
						return false;
					}
					if (this.body.daoijishi < 0) {
						this.msg('已结束')
						return
					}

					this.baoming()
				}

			},
			onOptionClick(e) {
				console.log(e)
			},

			showpic(img) {
				uni.previewImage({
					current: img,
					urls: [img]
				});
			},

			call(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile.toString()
				})
			},

			tuikuanreg() {
				this.hexiao = false
				let that = this;
				uni.showModal({
					title: '提示',
					content: '发起人同意后原路退款，确定要申请退款吗？',
					confirmText: '申请退款',
					success: function(res) {
						if (res.confirm) {
							that.tuikuanpass()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			openLocation() {

				if (this.body.lng) {
					uni.openLocation({
						longitude: Number(this.body.lng),
						latitude: Number(this.body.lat),
						name: '活动举办地',
						address: this.body.address
					})
				} else {
					this.msg('未标注地图')
				}

			},

			async tuikuanpass() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/zuju/tuipass',
					data: {
						id: that.body.joinid
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: '退款成功，等待发起人同意',
							confirmText: '知道了',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									that.info()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

			},


			async baoming() {
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/payment/joinZuju',
					data: {
						id: that.id
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						uni.hideLoading()
						if (result.data.msg == '报名成功') {
							uni.showModal({
								title: '提示',
								content: result.data.msg,
								confirmText: '知道了',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										that.info()
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}


						if (result.data.msg == '付费') {
							this.show_shenqing = true
							that.oid = result.data.data
						}



					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

			},
			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/index/Active_detail',
					data: {
						id: that.id
					}
				});

				if (result.statusCode == 200) {
					that.body = result.data.data
					that.tagList = that.body.images
					that.userbody = result.data.data.userInfo
					that.join = that.body.joinInfo
				}
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			getRandomCoolBg() {
				return this.$tn.colorUtils.getRandomCoolBgClass()
			},

			async post(type) {
				let that = this;
				let url = '/chat/payment/zuju_pay';
				let id = this.oid
				// #ifdef APP	
				var fangshi = type;

				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: url,
					data: {
						id: id,
						pay_type: fangshi
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						uni.requestPayment({
							provider: fangshi,
							orderInfo: result.data.data, //支付宝订单数据
							success: function(res) {
								if (res.errMsg == 'requestPayment:ok') {
									that.info()
									//uni.navigateBack()
								} else {
									console.log('fail:' + JSON.stringify(res));
								}
							},
							fail: function(err) {
								console.log(err)
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

				// #endif


				// #ifdef MP
				//微信小程序

				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: url,
					data: {
						id: id,
						pay_type: 'wxxcx'
					}
				});


				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						let paycanshu = JSON.parse(result.data.data.pay)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: paycanshu.timeStamp,
							nonceStr: paycanshu.nonceStr,
							package: paycanshu.package,
							signType: 'MD5',
							paySign: paycanshu.paySign,
							success: function(res) {
								that.info()
							},

						});
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

				// #endif

				// #ifdef H5
				//微信公众号

				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {} else {
					this.msg('请到微信里打开才能支付！复制网址到微信访问吧' + ua.match(/micromessenger/i))
					//return
				}

				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: url,
					data: {
						id: id,
						pay_type: 'wxh5'
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						let paycanshu = result.data.data
						//、、、、、
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": paycanshu.appId, //公众号名称，由商户传入
								"timeStamp": paycanshu.timeStamp, //时间戳     
								"nonceStr": paycanshu.nonceStr, //随机串     
								"package": paycanshu.package,
								"signType": paycanshu.signType, //微信签名方式：     
								"paySign": paycanshu.paySign //微信签名 
							},
							function(ress) {
								if (ress.err_msg == "get_brand_wcpay_request:ok") {
									that.info()
								} else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
									uni.showToast({
										icon: "none",
										title: "'已取消支付"
									})
								} else {
									uni.showToast({
										icon: "none",
										title: "支付失败"
									})
								}
							}
						);
						//、、、

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

				// #endif

			},

			async flow() {


				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}


				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/zuju/followitem',
					data: {
						id: that.id
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						if (result.data.msg == '取消成功') {
							that.body.is_follow = false
						} else {
							that.body.is_follow = true
						}
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

			},


		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f7ff;
	}

	.tn-radius {
		border-radius: 20upx;
	}

	.img0 {
		width: 100%;
		height: 100%;
	}

	.img20 {
		width: 100%;
		height: 100%;
		border-radius: 20upx;
	}

	.img100 {
		width: 100%;
		height: 100%;
		border-radius: 100upx;
	}

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.rbox {
		position: relative;

		.rbtn {
			position: absolute;
			top: 0;
			top: -60upx;
			left: -146upx;
		}
	}

	.debox {
		background: #fff;
		border-radius: 20upx;
	}

	.headimg {
		height: 360upx;

		.imgtopbr {
			width: 100%;
			height: 100%;
			border-top-left-radius: 20upx;
			border-top-left-radius: 20upx;
		}
	}

	.labelbox {
		.labelitem {
			background: #a4ffd2;
			border-radius: 10upx;
			padding: 15upx 40upx;
			margin-right: 30upx;
		}
	}

	.timebox {
		border: 1px solid #000;
		border-radius: 20upx;
		background: #f5f7ff;
		padding: 30upx 60upx;

		.line {
			width: 1px;
			height: 40upx;
			background: #ccc;
		}
	}


	.launch {}

	.loction {
		// background: url("../static/icon_bg5.png") no-repeat;
		background-size: 100% 100%;

		.name {
			font-size: 36upx;
			font-weight: bold;
		}

		.btn {
			background: #000;
			padding: 10upx 20upx;
			border-radius: 40upx;

			.icon {
				color: #0055ff;
				font-size: 36upx;
			}

			.txt {
				padding-left: 10upx;
				color: #fff;
			}
		}
	}

	.avatarbox {
		.name {
			font-size: 36upx;
		}

		.info {
			.avatar {
				width: 100upx;
				height: 100upx;
				position: relative;

				.sex {
					position: absolute;
					background: #ceecff;
					border-radius: 100%;
					padding: 4upx;
					top: 0%;
					left: 0%;
					color: #0055ff;
				}

				.tn-icon-sex-female {
					background: #ffdfeb;
					color: #ff2eff;
				}
			}

			.txt {
				width: 100upx;
				font-size: 24upx;
				color: #ccc;
			}
		}
	}

	.fixedbox {
		position: fixed;
		bottom: 0%;
		width: 100%;
		height: 50px;
		background: #fff;
		padding: 0 30upx;

		.fixitem {
			font-size: 24upx;
		}

		.fixbtn {
			height: 30px;
			color: #fff;
			font-size: 24upx;
			text-align: center;
			background: #000;
			border-radius: 30upx;
			border-radius: 30upx;
			width: 400upx;
			line-height: 30px;
		}
	}

	.button {
		position: relative;
		overflow: visible;
		background-color: transparent;
		padding: 0;
		margin: 0;
		font-size: inherit;
		line-height: inherit;
		border: none;

		&::after {
			border: none;
		}
	}
</style>